<html>
	<head>
		<meta charset="utf-8" />
		<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport">
		<meta content="yes" name="apple-mobile-web-app-capable">
		<meta name="format-detection" content="telephone=no">
		<meta content="black" name="apple-mobile-web-app-status-bar-style">
		<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
		<script src="https://apps.bdimg.com/libs/jquery-fullPage/2.7.4/jquery.fullPage.js"></script> 
		<link type="text/css" rel="stylesheet" href="https://apps.bdimg.com/libs/animate.css/3.1.0/animate.min.css" />
		<link rel="stylesheet" type="text/css" href="https://y3.ifengimg.com/l/2015/52/7a6a9014b0658e0/jquery.fullPage.css" /> 
		<style>
		*{
			padding:0px;
			margin:0px;
			border: none;
			-webkit-tap-highlight-color: rgba(0,0,0,0);
			-webkit-tap-highlight-color: transparent;
			outline: none;
		}
		.body{
			background-image:url(http://ovqtjb3wg.bkt.clouddn.com//img/rencuo/5157d7fe16d264e.jpg);
			height:100vh;
			background-size:100% 100%;
			padding: 0.1px;
		}
		#page2 .fp-tableCell .body{
			background-image:url(http://ovqtjb3wg.bkt.clouddn.com//img/rencuo/775975be640011c.jpg);
		}
		#page3 .fp-tableCell .body{
			background-image:url(http://ovqtjb3wg.bkt.clouddn.com//img/rencuo/0211.jpg);
		}
		#page2 .fp-tableCell .body img{
			width:30%;
		}
		.section img {
			position: absolute;
			display: none;
		}
		.pg1_img1 {
			top: 11vh;
			left: 32vw;
		}
		.pg1_img2 {
			top: 30vh;
			left: 10vw;
		}
		.pg1_img3 {
			top: 30vh;
			right: 10vw;
		}
		.pg1_img4 {
			top: 45vh;
			left: 37vw;
		}
		.pg1_img5 {
		top: 67vh;
		left: 32vw;
		}
		.pg1_img6 {
			top: 80vh;
			right: 6vw;
		}
		.pg2_img1 {
			top: 31vh;
			left: 15vw;
			width: 25vw;
		}
		.pg2_img2 {
			top: 26vh;
			right: 14vw;
			width: 28vw;
		}
		.pg2_img3 {
			top: 37vh;
			left: 10vw;
			width: 30vw;
		}
		.pg2_img4 {
			top: 45vh;
			left: 60vw;
			width: 30vw;
		}
		.pg2_img5 {
			top: 56vh;
			left: 18vw;
			width: 24vw;
		}
		.pg2_img6 {
			top: 62vh;
			right: 10vw;
			width: 26vw;
		}
		.pg2_img7{
			top: 80vh;
			right: 20vw;
			width: 26vw;
		}
		.htx{ 
			width: 69vw;
			height: 69vw;
			margin: 0 auto;
			display: block;
			border-radius: 50%;	
			-webkit-transition:  -webkit-transform 2s; /* For Safari 3.1 to 6.0 */
			transition:  transform 2s;
			opacity:0.9;
			background-image:url(http://ovqtjb3wg.bkt.clouddn.com//img/rencuo/htx.png);	
			background-size:100% 100%;
		}
		.bln{
			width: 69vw;
			height: 69vw;
			margin: 24vw auto;
			border-radius: 50%;
			border: 1px solid rgba(235,142,166,0.7);
			cursor: pointer;
			box-shadow: 0 0 30px rgba(235,142,166,0.7),0 0 30px rgba(235,142,166,0.7) inset;
			animation: breath 1s ease-in-out 0s infinite alternate;
		}
		@keyframes breath{
			0% { opacity: 1; box-shadow:0 0 30px rgba(235,142,166,0.7),0 0 30px rgba(235,142,166,0.7) inset;}
			50%{ opacity: 0.8; border:1px solid #abcdef; box-shadow: 0 0 30px rgba(171,205,239,0.7),0 0 30px rgba(171,205,239,0.7) inset;}
			100% { opacity: 1; box-shadow:0 0 30px rgba(235,142,166,0.7),0 0 30px rgba(235,142,166,0.7) inset;}
		}
		.animation{animation:rotating 2s linear infinite;}
		@keyframes rotating{
			from{transform:rotate(0)}
			to{transform:rotate(360deg)}
		}
		.text{
			width: 80vw;
			margin: auto;
			font-size: 16px;
			letter-spacing: 2px;
			line-height: 28px;
			text-shadow: 5px 5px 5px #FF0000;
		}
		.mps3{
			    background: url(http://ovqtjb3wg.bkt.clouddn.com//img/rencuo/htx.png) no-repeat;
				background-size: 100% 100%;
				-webkit-background-size: 100% 100%;
				display: block;
				height: 1.625rem;
				width: 1.625rem;
				z-index: 99;
				position: absolute;
				bottom: 0.625rem;
				right: 0.625rem;
				animation: 9.5s linear 0s normal none infinite rotate;
				-webkit-animation: 9.5s linear 0s normal none infinite rotate;
		}
		.boxs{
			width:46vw;
			margin:50px auto;
			animation:size 1s infinite;
			animation-direction:alternate;
			transition:1s all;
		}
		.boxs img{width:100%; top: 8vw;}
		@keyframes size{
			0%{
				transform:scale(0.8);
			}
			100%{
				transform:scale(1);
			}
		}
		.htext{
		    position: absolute;
			top: 87vh;
			left: 22vw;
			font-size: 16px;
			color: #9b2954;
			font-weight: bold;
		}
		.honclik{
			
		}
		/*fullPage.css*/
		.fp-tableCell {display: block;}
		</style>
	</head>
	<body>
	<audio hidden controls="controls" id="music" autoplay="autoplay" loop="loop" src="http://ovqtjb3wg.bkt.clouddn.com/Kim+Taylor-I+Am+You.mp3" ></audio>
	<div id="dowebok"> 
		<div class="section" id="page1"> 
			<div class="body">
				<div class="bln">
					<div class="htx animation" id="audioBtn"> </div>
				</div>
				<div class="text">
				</div>				
			</div>
		</div>
		<div class="section" id="page2"> 
			<div class="body">
				<img class="pg1_img1 animated" src="http://ovqtjb3wg.bkt.clouddn.com//img/rencuo/201710262220081270.gif" />
				<img class="pg1_img2 animated" src="http://ovqtjb3wg.bkt.clouddn.com//img/rencuo/201803052031042056.gif" />
				<img class="pg1_img3 animated" src="http://ovqtjb3wg.bkt.clouddn.com//img/rencuo/201805281143155936.gif" />
				<img class="pg1_img4 animated" src="http://ovqtjb3wg.bkt.clouddn.com//img/rencuo/201803052031040060.gif" />
				<img class="pg1_img5 animated" src="http://ovqtjb3wg.bkt.clouddn.com//img/rencuo/201712201100528312.gif" />
				<img class="pg1_img6 animated" src="http://ovqtjb3wg.bkt.clouddn.com//img/rencuo/201712052233457409.gif" />
			</div>
		</div>
		<div class="section" id="page3"> 
			<div class="body">		
				<div class="boxs">
					<img class="honcliks" src="http://ovqtjb3wg.bkt.clouddn.com//img/rencuo/xin.png" />
				</div>
				<img class="pg2_img1 animated" src="http://ovqtjb3wg.bkt.clouddn.com//img/rencuo/chi.png" />
				<img class="pg2_img2 animated" src="http://ovqtjb3wg.bkt.clouddn.com//img/rencuo/67abde8c12274348f8987628a2fa5f48.png" />
				<img class="pg2_img3 animated" src="http://ovqtjb3wg.bkt.clouddn.com//img/rencuo/1656f01ed636d9bs.png" />
				<img class="pg2_img4 animated" src="http://ovqtjb3wg.bkt.clouddn.com//img/rencuo/3057ee4a1396458.png" />
				<img class="pg2_img7 animated" src="http://ovqtjb3wg.bkt.clouddn.com//img/rencuo/1657dbcd12dc75e.png" />
				<img class="pg2_img5 animated" src="http://ovqtjb3wg.bkt.clouddn.com//img/rencuo/d6958ea78d31d847315af31bc3f950f0.png" />
				<img class="pg2_img6 animated" src="http://ovqtjb3wg.bkt.clouddn.com//img/rencuo/e805f2c07534fab73991555ed9881c6e.png" />
				<div class="htext">嘿嘿嘿</div>	
			</div>
		</div>
	</div>
	</body>
	<script>
	$(function(){
		$('#dowebok').fullpage({
				afterLoad : function (anchorLink, index) {
					//第一屏
					if(index == 1){					
					}
					if(index == 2){
						$('.pg1_img1').fadeIn().addClass('fadeInLeft');
						$('.pg1_img2').fadeIn().addClass('lightSpeedIn');
						$('.pg1_img3').fadeIn().addClass('fadeInLeft');
						$('.pg1_img4').fadeIn().addClass('fadeInRight');
						$('.pg1_img5').fadeIn().addClass('rotateIn');
						$('.pg1_img6').fadeIn().addClass('rotateInDownLeft');
					}
					if(index == 3){						
						$('.honcliks').fadeIn().addClass('bounceInUp');
						$('.pg2_img1').fadeIn().addClass('fadeInLeft');
						$('.pg2_img2').fadeIn().addClass('lightSpeedIn');
						$('.pg2_img3').fadeIn().addClass('fadeInLeft');
						$('.pg2_img4').fadeIn().addClass('fadeInRight');
						$('.pg2_img5').fadeIn().addClass('rotateIn');
						$('.pg2_img6').fadeIn().addClass('rotateInDownLeft');
						$('.pg2_img7').fadeIn().addClass('rotateInDownLeft');
					}
				},
				onLeave : function (index, direction) {
					if(index == 2){					
						$('.pg1_img1').fadeIn().removeClass('fadeInLeft');
						$('.pg1_img2').fadeIn().removeClass('lightSpeedIn');
						$('.pg1_img3').fadeIn().removeClass('fadeInLeft');
						$('.pg1_img4').fadeIn().removeClass('fadeInRight');
						$('.pg1_img5').fadeIn().removeClass('rotateIn');
						$('.pg1_img6').fadeIn().removeClass('rotateInDownLeft');
					}
					if(index == 3){
						$('.honcliks').fadeIn().removeClass('bounceInUp');
						$('.pg2_img1').fadeIn().removeClass('fadeInLeft');
						$('.pg2_img2').fadeIn().removeClass('lightSpeedIn');
						$('.pg2_img3').fadeIn().removeClass('fadeInLeft');
						$('.pg2_img4').fadeIn().removeClass('fadeInRight');
						$('.pg2_img5').fadeIn().removeClass('rotateIn');
						$('.pg2_img6').fadeIn().removeClass('rotateInDownLeft');
						$('.pg2_img7').fadeIn().removeClass('rotateInDownLeft');
					}
				}
			});	
		$("#audioBtn").click(function(){
		  var music = document.getElementById("music");   
			if(music.paused){
				music.play();
				$("#audioBtn").addClass("animation");
			}else{
				music.pause();
				$("#audioBtn").removeClass("animation");
			}
		});
	});
	
	</script>
	<script>
	function text(str){
	   var arr=[];
	   var text=document.getElementsByClassName("text")[0];
	   for(var i=0;i<str.length;i++){arr[i]=str[i];}
	   var p=document.createElement("p");
	   text.appendChild(p);
	   var index=0;
	   var obj=setInterval(function(){
		   if(index<arr.length){
		   var text=document.createTextNode(arr[index]);
		   }
		   p.appendChild(text);
			index++;
		   },200);		   
	}
	window.onload=function(){
	  text("我错了，求原谅，小的再也不敢了。乖别生气了，别气坏了身体，来来来我给你买火龙果吃，别生我气了哈!");	
	}
	</script>
</html>
